<!--
 * @Author: YTian
 * @Date: 2023-05-12 15:27:17
 * @LastEditTime: 2023-05-20 10:13:22
 * @Description: 底部播放组件
 * @FilePath: \pcsong\src\components\Base.vue
-->
<script setup>
// ========= 导入滑动条组件 ========= //
import { NSlider, NButton } from 'naive-ui'

// ========= 导入vue api ========= //
import { ref } from 'vue'

// ========= 导入全局数据 ========= //
import {
	song__index_get,
	audio__state,
	audio__pause_or_play,
	current__data,
	last_or_next,
	audio_nature,
	audio_time_up,
	audio_volume_up,
	song__data_links_get,
	Song__datas__links_del,
	specify__index,
	Song__datas__links_all_del
} from '@/global/data'

let song_index = song__index_get()

let data = await current__data

/**
 * 将传进来的数字变成分秒的格式 如: 90 => 01:30
 *
 * @description: 格式化时间
 * @param {*} duration
 * @return {*} string
 */
const formatDuration = (duration) => {
	const minutes = Math.floor(duration / 60)
	const seconds = duration % 60 | 0

	return `${minutes.toString().padStart(2, '0')}:${seconds
		.toString()
		.padStart(2, '0')}`
}

let playlist = ref(false)

/**
 * @description: 更改状态
 * @return {*}
 */
const playlist_up = (boo) => {
	playlist.value = boo ?? !playlist.value
}
</script>

<template>
	<div class="null" v-if="data === 'no'">请添加音乐~</div>

	<div class="base" v-if="data !== 'no'">
		<div class="base__details">
			<div class="base__details__cover">
				<img :src="data?.cover" alt="" />
			</div>
			<p class="base__details__base__details">
				{{ data?.song__name }}
			</p>
			<p class="base__details__base__artist">
				{{ data?.artist }}
			</p>
		</div>

		<div class="base__control">
			<div>
				<div>
					{{
						audio_nature.time
							? formatDuration(audio_nature.time)
							: '00:00'
					}}
				</div>
				<div>
					<!-- 上一曲 -->
					<span>
						<svg
							@click="last_or_next('last')"
							width="36"
							height="36"
							viewBox="0 0 36 36"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M25.5 27L16.5 18L25.5 9"
								stroke="black"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
							<path
								d="M10.5 9V27"
								stroke="black"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
						</svg>
					</span>

					<!-- 暂停 | 播放 -->
					<span>
						<svg
							v-if="audio__state === 'play'"
							width="36"
							height="36"
							viewBox="0 0 36 36"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click="audio__pause_or_play('pause')"
						>
							<path
								d="M18 33C26.2843 33 33 26.2843 33 18C33 9.71573 26.2843 3 18 3C9.71573 3 3 9.71573 3 18C3 26.2843 9.71573 33 18 33Z"
								fill="black"
								stroke="black"
								stroke-width="2.66667"
								stroke-linejoin="round"
							/>
							<path
								d="M14.25 13.5V22.5"
								stroke="white"
								stroke-width="2.66667"
								stroke-linejoin="round"
							/>
							<path
								d="M21.75 13.5V22.5"
								stroke="white"
								stroke-width="2.66667"
								stroke-linejoin="round"
							/>
						</svg>

						<svg
							v-else
							width="36"
							height="36"
							viewBox="0 0 36 36"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
							@click="audio__pause_or_play('play')"
						>
							<path
								d="M18 33C26.2843 33 33 26.2843 33 18C33 9.71573 26.2843 3 18 3C9.71573 3 3 9.71573 3 18C3 26.2843 9.71573 33 18 33Z"
								fill="black"
								stroke="black"
								stroke-width="2"
								stroke-linejoin="round"
							/>
							<path
								d="M15 18V12.8038L19.5 15.4019L24 18L19.5 20.5981L15 23.1961V18Z"
								fill="white"
								stroke="white"
								stroke-width="2"
								stroke-linejoin="round"
							/>
						</svg>
					</span>

					<!-- 下一曲 -->
					<span
						><svg
							@click="last_or_next('next')"
							width="36"
							height="36"
							viewBox="0 0 36 36"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M10.5 9L19.5 18L10.5 27"
								stroke="black"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
							<path
								d="M25.5 9V27"
								stroke="black"
								stroke-width="2.66667"
								stroke-linecap="round"
								stroke-linejoin="round"
							/>
						</svg>
					</span>
				</div>
				<div>
					{{
						audio_nature.max
							? formatDuration(audio_nature.max)
							: '00:00'
					}}
				</div>
			</div>
			<div>
				<n-slider
					:format-tooltip="formatDuration"
					:value="audio_nature.time"
					:max="audio_nature.max"
					@update:value="audio_time_up"
				/>
			</div>
		</div>

		<div class="base__volume">
			<n-slider
				:format-tooltip="(val) => `${val}%`"
				v-model:value="audio_nature.volume"
				:min="30"
				@update:value="audio_volume_up"
			/>
			<span @click="playlist_up()"
				><svg
					width="32"
					height="32"
					viewBox="0 0 32 32"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
				>
					<path
						d="M16 12.6667H26.6667"
						stroke="black"
						stroke-width="2.66667"
						stroke-linejoin="round"
					/>
					<path
						d="M16 6.66669H26.6667"
						stroke="black"
						stroke-width="2.66667"
						stroke-linejoin="round"
					/>
					<path
						d="M5.33325 25.3333H26.6666"
						stroke="black"
						stroke-width="2.66667"
						stroke-linejoin="round"
					/>
					<path
						d="M5.33325 18.6667H26.6666"
						stroke="black"
						stroke-width="2.66667"
						stroke-linejoin="round"
					/>
					<path
						d="M5.33325 6.66669L10.6666 10L5.33325 13.3334V6.66669Z"
						fill="black"
						stroke="black"
						stroke-width="2.66667"
						stroke-linejoin="round"
					/>
				</svg>
			</span>
		</div>
	</div>

	<div
		v-if="data !== 'no'"
		class="playlist"
		:class="{ playlist_show: playlist }"
	>
		<div>
			<n-button
				:round="true"
				type="error"
				@click="playlist_up(false), Song__datas__links_all_del()"
			>
				全部删除
			</n-button>
			<img
				@click="playlist_up(false)"
				draggable="false"
				src="/del.svg"
				alt=""
			/>
			<div class="br"></div>
		</div>

		<div>
			<div
				class="playlist_item"
				v-for="(item, index) of song__data_links_get()"
				@click="specify__index(index), playlist_up()"
				:class="{ on_air: index === song_index }"
			>
				<div>
					{{ item.song__name }}
				</div>
				<div>{{ item.artist }}</div>
				<div
					class="playlist_item_del"
					@click.stop="Song__datas__links_del(index)"
				>
					<svg
						width="20"
						height="20"
						viewBox="0 0 20 20"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
					>
						<path
							d="M3.75 4.16666V18.3333H16.25V4.16666H3.75Z"
							stroke="#696969"
							stroke-width="1.33333"
							stroke-linejoin="round"
						/>
						<path
							d="M8.33325 8.33334V13.75"
							stroke="#696969"
							stroke-width="1.33333"
							stroke-linejoin="round"
						/>
						<path
							d="M11.6667 8.33334V13.75"
							stroke="#696969"
							stroke-width="1.33333"
							stroke-linejoin="round"
						/>
						<path
							d="M1.66675 4.16666H18.3334"
							stroke="#696969"
							stroke-width="1.33333"
							stroke-linejoin="round"
						/>
						<path
							d="M6.66675 4.16666L8.03716 1.66666H11.9905L13.3334 4.16666H6.66675Z"
							stroke="#696969"
							stroke-width="1.33333"
							stroke-linejoin="round"
						/>
					</svg>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
.base {
	--h: 6.25rem;
	height: 100%;

	display: grid;
	grid-template-columns: 19rem 1fr 14.875rem;
}

.base__details {
	display: grid;
	grid-template-columns: var(--h) 1fr;
	grid-template-rows: 0.4rem 2.2rem 1fr;
	grid-gap: 0.4rem 1.85rem;
}

.base__details__cover {
	grid-area: 1 / 1 / 4 / 2;
}

.base__details__cover img {
	width: var(--h);
	height: var(--h);
	object-fit: cover;
}

.base__details__base__details {
	grid-area: 2 / 2 / 3 / 3;
	font-size: 24px;
}

.base__details__base__artist {
	grid-area: 3 / 2 / 4 / 3;
	font-size: 16px;
}

.base__details__base__details,
.base__details__base__artist {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.base__control {
	padding: 0.4rem 4rem;
	display: grid;
	grid-template-rows: 4rem 1fr;
}

.base__control > div:nth-of-type(1) {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 1rem;
}

.base__control .n-slider {
	width: 100%;
}

.base__volume {
	display: flex;
	align-items: center;
	gap: 26px;

	margin-right: 1rem;
}

svg {
	cursor: pointer;
}

.null {
	font-size: 20px;
	padding: 1.2rem;
}

.playlist {
	padding: 16px 12px;

	position: absolute;
	right: 1rem;
	bottom: 7rem;

	width: 20rem;
	height: 19.5rem;

	background: #ffffff;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
	border-radius: 14px;

	transform: scale(0, 0);
	transform-origin: right bottom;

	transition: transform 0.4s;

	display: grid;
	grid-template-rows: 40px 1fr;
}

.playlist .br {
	width: 100%;
	height: 2px;
	background-color: #d9d9d9;
	margin: 8px 0;
}

.playlist > div:nth-of-type(1) {
	position: relative;
}

.playlist > div:nth-of-type(1) img {
	position: absolute;
	top: 0;
	right: 0;

	cursor: pointer;
}

.playlist > div:nth-of-type(2) {
	margin-top: 8px;
	overflow-y: overlay;
	overflow-x: hidden;
}

.playlist_show {
	transform: scale(1, 1);
}

.playlist_item {
	user-select: none;

	width: 100%;
	display: grid;

	color: #696969;
	font-size: 14px;

	grid-template-columns: 1fr 100px 40px;
	grid-column-gap: 8px;
	align-items: center;

	cursor: pointer;
}

.playlist_item + .playlist_item {
	margin: 0.5rem 0;
}

.playlist_item > div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.on_air {
	color: #00a1d6;
}

.on_air > *:nth-of-type(1) {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 28px;
	position: relative;
}

.on_air > *:nth-of-type(1)::before {
	display: block;
	content: '';
	width: 26px;
	height: 26px;
	background: url('/playing.gif');
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
}
</style>
